<template>
  <view>
    <!-- 筛选 -->
    <view class="filter">
      <text class="active">综合</text>
      <text>销量</text>
      <text>价格</text>
    </view>
    <!-- 区域滚动：商品列表 -->
    <scroll-view class="goods" scroll-y @scrolltolower="getMoreData">
      <view v-for="item in searchGoodsList" :key="item.goods_id" class="item" @click="goDetail(item.goods_id)">
        <!-- 商品图片 -->
        <image class="pic" :src="item.goods_small_logo" />
        <!-- 商品信息 -->
        <view class="meta">
          <view class="name">{{ item.goods_name }}</view>
          <view class="price">
            <text>￥</text>{{ item.goods_price }}
            <text>.00</text>
          </view>
        </view>
      </view>
      <view class="end" v-if="dataIsOver">
        <text>我是有底线的！</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getSearchGoodsListRequest } from '@/api/list.js'
export default {
  data() {
    return {
      // 请求数据：
      suggestData: {
        query: '', // 传过来的搜索商品列表的关键词
        cid: '', // 分类id
        pagenum: 1, // 页码
        pagesize: 10 // 页容量
      },
      // 商品列表
      searchGoodsList: [],
      // 商品总数
      total: 0
    };
  },

  computed: {
    // 判断数据是否加载完毕
    dataIsOver() { 
      return this.searchGoodsList.length === this.total
    }
  },

  onLoad({ query }) {
    // 将传过来的搜索商品列表的关键词赋值
    this.suggestData.query = query
    // 发起请求，获取商品列表
    this.getSearchGoodsList()
  },

  methods: {
    // 根据传过来的关键词得到商品列表
    async getSearchGoodsList() {
      const { data } = await getSearchGoodsListRequest(this.suggestData)
      // 由于后期需要触底加载更多数据，因此采用追加的方式
      this.searchGoodsList.push(...data.goods)
      this.total = data.total
    },

    // 检测页面区域触底滚动，当快触底的时候显示下一页数据
    async getMoreData() {
      // 判断数据是否已经加载了全部
      // 加载完了的情况：
      if (this.dataIsOver) return
      // 如果没有加载完毕，继续请求数据加载：
      // 页码加一
      this.suggestData.pagenum++
      // 添加loading效果
      uni.showLoading({
        title: '数据加载中...',
        mask: true
      })
      // 获取请求
      await this.getSearchGoodsList()
      // 关闭 loading
      uni.hideLoading()
    },

    // 去到商品详情页
    goDetail(goodsId) {
      uni.navigateTo({
        url: `/packone/goods/index?id=${goodsId}`
      })
    },
  }
};
</script>

<style scoped lang="scss">
.filter {
  display: flex;
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 1rpx solid #ddd;

  /* #ifdef H5 */
  position: relative;
  z-index: 99;
  /* #endif */

  text {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #333;

    &.active {
      color: #ea4451;
    }
  }
}

.goods {
  position: absolute;
  width: 100%;
  top: 97rpx;
  bottom: 0;
}

.item {
  display: flex;
  padding: 30rpx 20rpx 30rpx 0;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .pic {
    width: 200rpx;
    height: 200rpx;
    margin-right: 30rpx;
  }

  .meta {
    flex: 1;
    font-size: 27rpx;
    color: #333;
    position: relative;
  }

  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    position: absolute;
    bottom: 0;

    color: #ea4451;
    font-size: 33rpx;

    text {
      font-size: 22rpx;
    }
  }
}
.end {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}
</style>
